<template>
	<div class="layout-main message-main">
		<div class="section section-table">
			<div class="panel-title">
				<span class="title">消息数据</span>
				<div class="title-right">
					<button @click="showTipsLayer(1)">已读</button>
					<button class="btn-delete" @click="showTipsLayer(2)">删除</button>
				</div>
			</div>
			<div class="panel-content">
				<el-table :ref="tableData.ref" :data="tableData.data" border style="width: 100%" @selection-change="selectionChange">
					<el-table-column fixed="right" label="操作" width="120">
						<template slot-scope="scope">
							<a v-if="scope.row.isRead==0" @click="showTipsLayer(1,scope.row.id)">已读</a>
							<a v-else class="disable">已读</a>
							<a @click="showTipsLayer(2,scope.row.id)">删除</a>
						</template>
					</el-table-column>
					<el-table-column type="selection" width="40">
					</el-table-column>
					<el-table-column prop="cdate" label="消息获取时间" width="160">
					</el-table-column>
					<el-table-column label="消息内容">
						<template slot-scope="scope">
							<div class="flex-box">
								<i class="icon i-new" v-if="scope.row.isRead==0"></i>
								<div class="flex-item">{{scope.row.content}}</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination v-if="tableData.total" :current-page="tableData.index" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
				 :page-size="tableData.size" :total="tableData.total" layout="total, sizes, prev, pager, next, jumper" @size-change="tableSizeChange"
				 @current-change="getTableData">
				</el-pagination>
			</div>
		</div>
		<!-- 提示 -->
		<layer :data="tipsLayer" @on-ok="saveSubmit"></layer>
	</div>
</template>
<script>
	import './index.less'
	import layer from '@/components/layer'
	import { formatDate } from '@/mixins/filters'
	export default {
		name: 'message',
		data() {
			return {
				tableData: {
					filter: {},   // 筛选
					flag: false,
					total: 0,
					sizes: 10,    // 选择每页显示条目个数
					size: 10,
					index: 1,
					data: [],
					ref: 'messageTable'
				},
				tipsLayer: {
					show: false,
					flag: true,
					id: 0,
					ids: [],
					type: 1,
					title: '提示',
					tips: '是否确认已读该消息'
				}
			}
		},
		components: {
			layer
		},
		mounted() {
			this.$store.dispatch('setBreadData', [
				{
					name: '消息'
				}
			])
			this.getTableData(1)
		},
		methods: {
			// table每页条数改变
			tableSizeChange(val) {
				this.tableData.size = val
				this.tableData.flag = false
				this.getTableData(1)
			},
			// 获取table数据
			getTableData(index) {
				let _data = this.tableData.filter
				this.tableData.index = index
				_data.pageBean = {}
				_data.pageBean.pageIndex = index
				_data.pageBean.pageSize = this.tableData.size
				api.messageList(_data)
					.then(res => {
						if (!this.tableData.flag) {
							this.tableData.total = res.totalCount
							this.tableData.flag = true
						}
						this.tableData.data = []
						res.list.map(item => {
							if (item.cdate) {
								item.cdate = formatDate(item.cdate)
							}
							return item
						})
						this.tableData.data = res.list
					})
					.catch(res => {
						console.log(res)
					})
			},
			// 勾选table
			selectionChange(val) {
				if (val) {
					this.tipsLayer.id = 0
					this.tipsLayer.ids = []
					val.forEach(v => {
						this.tipsLayer.ids.push(v.id)
					})
				}
			},
			// 显示弹窗（type 1:已读 2:删除）
			showTipsLayer(type, id) {
				this.tipsLayer.show = true
				this.tipsLayer.type = type
				let _tips = ''
				if (id) {
					this.tipsLayer.id = id
					if (this.tipsLayer.type == 1) {
						_tips = '是否确认已读该消息'
					}
					else {
						_tips = '是否确认删除该消息'
					}
				}
				else {
					if (this.tipsLayer.type == 1) {
						_tips = '是否确认已读勾选消息'
					}
					else {
						_tips = '是否确认删除勾选消息'
					}
				}
				this.tipsLayer.tips = _tips
			},
			// 已读提交
			saveSubmit() {
				let _data = []
				let apiUrl = 'updateRead'
				if (this.tipsLayer.type == 2) {
					apiUrl = 'delCaseMessage'
				}
				if (this.tipsLayer.id) {
					_data.push(this.tipsLayer.id)
				}
				else {
					if (this.tipsLayer.ids.length == 0) {
						this.$msg.error('请勾选消息')
						return
					}
					_data = this.tipsLayer.ids
				}
				api[apiUrl](_data)
					.then(res => {
						if (this.tipsLayer.type == 1) {
							this.$msg.success('已读成功')
							this.getTableData(this.tableData.index)
						}
						else {
							this.$msg.success('删除成功')
							this.tableData.flag = false
							this.getTableData(1)
						}
						this.tipsLayer.show = false
					})
					.catch(res => {
						console.log(res)
					})
			}
		}
	}
</script>